<?php include THEMES_PATH.'public/before_body2.phtml'; ?>
<style>
.gift-card-form {
  margin-top: 2em;
  margin-bottom: 2.5em;
}
.gift-card-form li {
  margin-bottom: 1em;
  overflow: hidden;
}
.gift-card-form li label {
  margin-top: 4px;
  text-align: right;
}
.gift-card-form .mt0 {
  margin-top: 0;
}
.gift-card-form li input[type=text],
.gift-card-form li textarea {
  width: 100%;
}
.gift-card-form li .error {
  text-align: left;
}
.gift-card-form select {
  border: 1px solid #ccc;
}
.gift-card-form textarea {
  min-height: 100px;
  vertical-align: top;
  resize: none;
}

@media screen and (max-width: 768px) {
  .gift-card-form li {
    text-align: left;
  }
}
</style>
</head>
<body>
<?php include THEMES_PATH.'public/header2.phtml';?>
<div class="main-width align-center">
  <h1 class="title"><?php echo L('gift_index_title')?></h1>
  <p class="text"><?php echo L('gift_index_desc')?></p>
  <form class="clear" name="giftCardForm" id="giftCardForm" method="post" action="__SELF__">
    <ul class="gift-card-form col-md-8 col-md-push-2">
      <li>
        <label class="col-sm-3" for="from_name"><i class="asterisk">*</i><?php echo L('gift_from_name')?>:</label>
        <div class="col-sm-9"><input class="col-xs-12" type="text" name="from_name" id="from_name" /></div>
      </li>
      <li>
        <label class="col-sm-3" for="your_email"><i class="asterisk">*</i><?php echo L('gift_your_email')?>:</label>
        <div class="col-sm-9">
          <input type="text" name="your_email" id="your_email" value="<?php echo $email;?>"/>
        </div>
      </li>
      <li>
        <label class="col-sm-3" for="your_phone"><i class="asterisk">*</i><?php echo L('gift_your_phone')?>:</label>
        <div class="col-sm-9">
          <input type="text" name="your_phone" id="your_phone" />
        </div>
      </li>
      <li>
        <label class="col-sm-3" for="to_name"><i class="asterisk">*</i><?php echo L('gift_to_name')?>:</label>
        <div class="col-sm-9">
          <input type="text" name="to_name" id="to_name" />
        </div>
      </li>
      <li>
        <label class="col-sm-3" for="recipient_email"><i class="asterisk">*</i><?php echo L('gift_email')?>:</label>
        <div class="col-sm-9">
          <input type="text" name="recipient_email" id="recipient_email" />
        </div>
      </li>
      <li>
        <label class="col-sm-3" for="to_phone"><i class="asterisk">*</i><?php echo L('gift_to_phone')?>:</label>
        <div class="col-sm-9">
          <input type="text" name="to_phone" id="to_phone" />
        </div>
      </li>
      <li>
        <label class="col-sm-3 mt0" for="pid"><i class="asterisk">*</i><?php echo L('gift_amount')?>:</label>
        <div class="col-sm-9" class="select-widget">
          <span class="pull-left" style="margin:0 1em 0 -3px;">100</span>
          <select class="pull-left" name="pid" id="pid">
            <?php foreach($amount_list as $k => $v):?>
            <option value="<?php echo $v['id']; ?>"><?php echo currency($v['custom_price']); ?></option>
            <?php endforeach;?>
          </select>
        </div>
      </li>
      <li>
        <label class="col-sm-3 mt0" for="msg"><?php echo L('gift_msg')?>:</label>
        <div class="col-sm-9">
          <textarea name="msg" id="msg"></textarea>
        </div>
      </li>
      <li>
        <label class="col-sm-3"></label>
        <div class="col-sm-9 align-left"><?php echo L('black_friday_desc_2');?></div>
      </li>
      <li class="mt2x">
        <label class="col-sm-3"></label>
        <div class="col-sm-9 align-left">
          <button type="submit" class="btn btn-middle"><?php echo L('gift_add_to_bag');?></button>
        </div>
      </li>
    </ul>
  </form>
</div>
<script>
$(function () {
  var $amount = $('#pid');
  $amount.on('change', function () {
    $(this).prev().text($(this).find('option:selected').text());
  }).prev().text($amount.find('option:selected').text());

  $('#giftCardForm').validate({
    errorElement: 'p',
    submitHandler: function(form) {
      form.submit();
    },
    errorPlacement: function(error, element) {
      element.after(error);
    },
    rules: {
      from_name: 'required',
      to_name: 'required',
      recipient_email: {
        required: true,
        email: true
      },
      your_email: {
        required: true,
        email: true
      },
      your_phone:'required',
      to_phone:'required'
    },
    messages: {
      from_name: {
        required: "<?php echo L('gift_from_validate');?>"
      },
      to_name: {
        required: "<?php echo L('gift_to_validate');?>"
      },
      recipient_email: {
        required: "<?php echo L('gift_email_validate');?>",
        email: "<?php echo L('_EMAIL_FORMAT_ERROR_');?>"
      },
      your_email: {
        required: "<?php echo L('gift_email_validate') ?>",
        email: "<?php echo L('_EMAIL_FORMAT_ERROR_');?>"
      },
      your_phone:"<?php echo L('gift_phone_validate');?>",
      to_phone:"<?php echo L('gift_to_phone_validate');?>"
    }
  });
});
</script>
<?php include THEMES_PATH.'public/footer2.phtml';?>
<?php include THEMES_PATH.'public/after_body.phtml';?>